<template>
  <el-form :model="registerUser" :rules="registerRules" ref="registerForm" label-width="100px" class="registerForm sign-up-form">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="registerUser.name" placeholder="Enter UserName...">

      </el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="registerUser.email" placeholder="Enter Email...">

      </el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="registerUser.password" type="password" placeholder="Enter Password...">

      </el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password2">
      <el-input v-model="registerUser.password2" type="password" placeholder="Enter Password...">

      </el-input>
    </el-form-item>
    <el-form-item label="选择身份">
      <el-select v-model="registerUser.role" placeholder="请选择身份">
        <el-option label="管理员" value="admin"></el-option>
        <el-option label="用户" value="user">user</el-option>
        <el-option label="游客" value="visitor">visitor</el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="handleRegister()" type="primary" class="submit-btn">
        注册
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">

import {ref, getCurrentInstance, reactive} from "vue";
import { useRouter, useRoute} from "vue-router";
import axios from "axios";
import {ElMessage} from "element-plus";
// import {registerUser} from "../utils/registerValidators";
const router = useRouter();
function useRegisterUser(registerForm, props){
  const handleRegister = () => {
    registerForm.value.validate((valid) => {
      if (!valid){
        return
      }
      const registerParam = {
        user_name: props.registerUser.name,
        password: props.registerUser.password,
        email: props.registerUser.email,
        family_id:1,
        role_id:2
      }
      axios.post("/api/register", (registerParam)).then((res) => {
        if (res.data.code === 20000){
          ElMessage({
            showClose: true,
            message: '注册成功',
            type: 'success',
          })
        }else {
          ElMessage({
            showClose: true,
            message: '注册失败',
            type: 'success',
          })
        }
      })
    })
  }
  return {
    handleRegister
  }
}
export default {
  props: {
    registerUser: {
      type: Object,
      required: true,
    },
    registerRules: {
      type: Object,
      required: true,
    }
  },
  setup(props:any) {
    // @ts-ignore
    // const router = useRouter();
    const registerForm = ref()
    // const state = reactive({
    //   registerFormParam: {
    //     password:"",
    //     email:""
    //   }
    // })
    // const handleRegister = (formName) => {
    //   ctx.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("已经发送")
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // }
    return {
      registerForm,
      ...useRegisterUser(registerForm, props)
    }
  }
}
</script>

<style scoped>

</style>